<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue-渲染</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .select{
            width: 100px;
            display: inline-block;
            background-color: brown;
        }
        .active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <span 
            class="select" 
            v-for='(item,index) in select'
            :class="[item.name==type?'active':'']"
            :key='index'
            :data-set='item.name'
            @click='change'>
                {{item.name}}
        </span>
        <div v-for='(item,index) in select' v-if='type==item.name'>{{item.content}}</div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            created() {
                axios.post('https://www.easy-mock.com/mock/5c9c7979f66ca00dcdc08950/test/postdata')
                     .then((res)=>{
                         console.log('测试get接口',res)
                     })
                     .catch((error)=>{
                         console.log(error)
                     })
            },
            data:{
                type:"A",
                select:[
                    {name:'A',content:'数据绑定'},
                    {name:'B',content:'测试'},
                    {name:'C',content:'划水'},
                ],

            },
            methods: {
                change(e){
                    this.type = e.srcElement.dataset.set
                },
            },
        })
    </script>
</body>
</html>